/*
 * @Description: 预约记录
 * @Author: shuaishuai.wang
 * @Date: 2019-07-10 17:46:45
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-07-18 10:19:39
 */
<template>
  <div class="main fontsize32">
    <title-bar
      titleText='预约记录'
      :needBack='false'
    ></title-bar>
    <div class="scroll_area">
      <i
        class="icon iconfont icon-back back-btn fontsize40"
        @click="goBack"
      ></i>
      <!-- 此处是重写titleBar插件的返回按钮，将返回位置定位到APP首页 -->
      <div
        class="no_data"
        v-if="!recordList || recordList.length < 1"
      >
        <img src="./../assets/img/no_data.png" />
        <p>暂无预约记录</p>
      </div>
      <scroll
        :getListData="getRecordList"
        :up="up"
        ref="scroll"
        v-else
      >
        <div class="record_list">
          <div
            class="record flex-h flex-hsb"
            v-for="(record, index) in recordList"
            :key="index"
            @click="skipToDetail(record.ID)"
          >
            <div class="record_info flex-h flex-vc">
              <i
                class="iconfont fontsize40"
                :class="getRecordState(record).iconClass"
              ></i>
              <div class="record_msg">
                <h3>{{record.RESERVATION_CODE}}</h3>
                <p class="fontsize24">{{record.RESERVATION_DATE | timeFormate}} {{record.RESERVATION_TIME_PERIOD}}</p>
              </div>
            </div>
            <p>{{getRecordState(record).desc}}</p>
          </div>
          <p
            slot="NoDataModule"
            class="no_more"
          >没有更多了</p>
          <!--<div
          class="record"
          v-for="(record, index) in recordList"
          :key="index"
          @click="skipToDetail(index)"
          @touchend.capture="judgeDeleteArea(index)"
        >
          <div
            class="circle"
            :style="{backgroundColor: record.color}"
          ></scroll>
          <div class="info">
            <div
              class="title"
              :style="{color: record.color}"
            >{{record.title}}</div>
            <div class="time">{{record.time}}</div>
            <div class="state_code flex-h flex-hsb">
              <div class="code">预约码：{{record.code}}</div>
              <div
                class="state"
                :style="{color: record.color}"
              >{{record.state}}</div>
            </div>
          </div>
          <div
            class="delete"
            @click.stop=""
          >
            <p class="icon iconfont icon-delete"></p>
          </div>
        </div>-->
          <div class="menu_area"></div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import { TitleBar, XBScroll } from 'vue-xb-ui-depot'
import { AppRouterUtils } from 'vue-xiaobu-utils'
import AjaxForBusOpen from '@/utils/AjaxForBusOpen'
import { timeFormate } from './../../filters'
export default {
  components: {
    TitleBar,
    scroll: XBScroll
  },
  filters: {
    timeFormate
  },
  data() {
    return {
      recordList: [],
      reservationIconClass: [
        'icon-seceed icon_blue',
        'icon-cancel-o',
        'icon-cancel-o',
        'icon-cancel-o'
      ],
      carIconClass: [
        '',
        'icon-hourglass-full',
        'icon-seceed icon_green',
        'icon-cancel-o'
      ],
      up: {
        noMoreSize: 21,
        page: { size: 20 },
        htmlNodata: '<p class="upwarp-nodata">已显示全部</p>' // 无数据的布局，其中p标签中可以写自己想要的文字
      }
    }
  },
  mounted() {
    this.getRecordList(1, 20)
  },
  /* if (window.history && window.history.pushState) {
    window.history.pushState(null, null, '#')
    window.addEventListener('popstate', this.addEvent(), false) // false阻止默认事件
    this.popTimer = setTimeout(() => {
      this.popState = true
    }, 1000)
  }
},
distoryed() {
  this.removeEvent()
}, */
  methods: {
    skipToDetail(id) { // 跳转至预约详情页
      AppRouterUtils.open('vehicleDetail.html?_tv=false&_rv=false&id=' + id)
    },
    removeEvent() {
      window.removeEventListener('popstate', this.addEvent(), false) // false阻止默认事件
    },
    getRecordState(record) { // 获取当前预约订单状态，配给对应文字与图标
      if (record.CAR_CHECK_STATUS < 1) { // 未检测状态时显示预约状态
        let desc = ''
        if (record.RESERVATION_STATUS === 1 || record.RESERVATION_STATUS === 2) { // 将取消状态全部归类于已取消
          desc = '已取消'
        } else {
          desc = record.RESERVATION_STATUS_DESC
        }
        return {
          desc: desc,
          iconClass: this.reservationIconClass[record.RESERVATION_STATUS]
        }
      } else {
        return {
          desc: record.CAR_CHECK_STATUS_DESC,
          iconClass: this.carIconClass[record.CAR_CHECK_STATUS]
        }
      }
    },
    getRecordList(pageIndex, pageCapacity) {
      return new Promise((resolve, reject) => {
        AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/list', {
          PAGE_CAPACITY: pageCapacity,
          PAGE_INDEX: pageIndex
        }).then(data => {
          this.readyState = true
          if (pageIndex > 1) {
            this.recordList = this.recordList.concat(data.LIST)
          } else {
            this.recordList = data.LIST
          }
          console.log(this.recordList)
          resolve({ length: pageCapacity, count: data.COUNT })
        })
      })
    },
    addEvent() {
      if (this.popState) {
        this.goBack()
      }
    },
    goBack() { // 点击左上方返回按钮返回首页
      AppRouterUtils.goHome()
    }
  }
}
</script>

<style lang="scss" scope>
@import './../../common.scss';
.main {
  height: 100%;
  font-family: PingFangSC-Medium;
  font-weight: 400;
  background-color: $bgColorResult;
  position: relative;
  min-height: fill-available;
  overflow: hidden;
  .scroll_area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .back-btn {
      font-weight: bold;
      padding: 0 30px;
      height: 98px;
      line-height: 98px;
      position: absolute;
      margin-top: -98px;
      left: 0;
      color: #fff;
      z-index: 2;
    }
  }
  .no_data {
    text-align: center;
    margin-top: 32px;
    img {
      width: 506px;
      height: 310px;
      margin: auto;
    }
    p {
      margin-top: 32px;
      color: $fontColorMini;
    }
  }
  .record_list {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 32px 0;
    position: relative;
    z-index: 100;
    .record {
      width: 622px;
      background-color: $bgColorDiv;
      box-shadow: $boxShadow;
      border-radius: 4px; /*no*/
      margin: auto;
      margin-bottom: 18px;
      padding: 32px;
      .record_info {
        i {
          margin-right: 38px;
          color: #ccc;
        }
        .record_msg {
          p {
            margin-top: 8px;
          }
        }
        .icon_blue {
          color: $themeColors;
        }
        .icon_green {
          color: #00d098;
        }
        .icon-hourglass-full {
          color: #fa9373;
        }
      }
    }
    .no_more {
      text-align: center;
      color: #ccc;
      margin-top: 8px;
    }
    /*.record {
      width: 622px;
      background: $bgColorResult;
      box-shadow: $boxShadow;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      margin: auto;
      margin-bottom: 18px;
      padding: 16px 32px;
      position: relative;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      .circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #2784ff;
        margin: 14px 0;
      }
      .info {
        width: 588px;
        .title {
          height: 44px;
          margin-bottom: 8px;
          font-weight: 500;
          line-height: 44px;
        }
        .time {
          height: 40px;
          font-size: 28px;
          margin-bottom: 28px;
          color: $fontColorMini;
          line-height: 40px;
        }
        .code {
          height: 40px;
          font-size: 28px;
          color: $fontColorSecond;
          line-height: 40px;
        }
        .state {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }
      .delete {
        width: 160px;
        height: 196px;
        line-height: 196px;
        position: absolute;
        color: $fontColorWhite;
        background-color: #ff8585;
        text-align: center;
        right: -160px;
        top: 0;
        p {
          font-size: 24px;
        }
      }
    }*/
    .menu_area {
      height: 140px;
    }
  }
}
</style>
